<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        {{.pageTitle}}
        <small>{{.pageTitle}}</small>
    </h1>
    <ol class="breadcrumb">
        <li>
            <a href="{{urlfor "HomeController.Index"}}">
                <i class="fa fa-dashboard"></i> 首页</a>
        </li>
        <li class="active">{{.pageTitle}}</li>
    </ol>
</section>

<!-- Main content -->
<section class="content container-fluid">
    <!-- 页面内容开始 -->
    <div class="row">
        <div class="col-md-12">
            <form id="searchForm" class="searchForm">
                <div class="box box-solid collapsed-box">
                    <div class="box-header with-border">                     
                        <input type="text" name="CollectTime" id="CollectTime" class="form-control pull-left input-wd-md" placeholder="采集时间"/>
                        <input type="text" name="DTU_no" id="DTU_no" class="form-control pull-left input-wd-md" placeholder="DTU编号">
                        <input type="number" name="MeterAddress" class="form-control pull-left input-wd-md" placeholder="电表地址" min="1" max="255"/>

                        <div class="btn-group">
                            <button type="button" class="btn btn-warning" id="btnSearch"><i class="fa fa-search"></i> 搜索</button>
                            <button type="button" class="btn btn-default" id="btnClearSearch"><i class="fa fa-eraser"></i> 清除</button>
                        </div>
                    </div>
                </div>
            </form>

            <div class="box box-solid">
                <div class="box-body">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#tab_1-1" data-toggle="tab" aria-expanded="true">
                                    <i class="fa fa-line-chart"></i>
                                    <span>曲线图</span>
                                </a>
                            </li>
                            <li class="">
                                <a href="#tab_2-2" data-toggle="tab" aria-expanded="false">
                                    <i class="fa fa-hdd-o"></i>
                                    <span> 明细数据</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_1-1">
                            <div class="row">
                                <div class="col-md-12">
                                    <!-- electricity CHART -->
                                    <div class="box box-primary">
                                        <div class="box-header with-border">
                                            <i class="fa fa-plug"></i>
                                            <h3 class="box-title">电流</h3>

                                            <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                                </button>
                                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <div class="chart">
                                                <div id="electricityChart" style="height: 250px;  width: 100%;" >
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.box-body -->
                                    </div>
                                    <!-- /.box -->

                                    <!-- voltage CHART -->
                                    <div class="box box-info">
                                        <div class="box-header with-border">
                                            <i class="fa fa-bolt"></i>
                                            <h3 class="box-title">电压</h3>

                                            <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                                </button>
                                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <div id="voltageChart" style="height: 250px; width: 100%;" >
                                            </div>
                                        </div>
                                        <!-- /.box-body -->
                                    </div>
                                    <!-- /.box -->

                                    <!-- power_factor CHART -->
                                    <div class="box box-success">
                                        <div class="box-header with-border">
                                            <i class="fa fa-calendar-check-o"></i>
                                            <h3 class="box-title">功率因数</h3>

                                            <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                                </button>
                                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <div id="powerfactorChart" style="height: 250px;  width: 100%;" >
                                            </div>
                                        </div>
                                        <!-- /.box-body -->
                                    </div>
                                    <!-- /.box -->

                                    <!-- total_p_at_e CHART -->
                                    <div class="box box-warning">
                                        <div class="box-header with-border">
                                            <i class="fa fa-filter"></i>
                                            <h3 class="box-title">有功电能</h3>

                                            <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                                </button>
                                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <div id="totalPateeChart" style="height: 250px; width: 100%;" >
                                            </div>
                                        </div>
                                        <!-- /.box-body -->
                                    </div>
                                    <!-- /.box -->
                                </div>
                            </div>
                        </div>
                        <!-- /.tab-pane -->

                        <div class="tab-pane" id="tab_2-2">
                            <table id="dataGrid">

                            </table>
                        </div>
                        <!-- /.tab-pane -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面内容结束 -->
</section>
<!-- /.content -->